<template>
	<view class="setup" :class="theme+'-bg-middle'">
		<view class="navBox" :class="theme+'-border-bottom'">
			<view class="nav" :class="theme+'-ftitle-color'">
				<view class="nav-l">
					<view class="icon">
						<!-- <image style="transition:2s" src="../../static/images/icons/zhutiguanli.png"></image> -->
					</view>
					<view class="text" style="font-size: 26rpx;">
						<text>{{$t('setup.Basicsettings')}}</text>
					</view>
				</view>
			</view>

			<view class="nav line" @click="open" :class="theme + '-ftext-color'">
				<view class="nav-l">
					<view class="icon">
						<image style="transition:2s" src="../../../static/images/icons/a-language1x.png"></image>
					</view>
					<view class="text">
						<text>{{$t('setup.Language')}}</text>
					</view>
				</view>
			</view>

			<uni-popup ref="popup">
				<view class="popupBox br-1" :class="theme+'-bg-cbox'">
					<view class="item" :class="theme + '-ftext-color'">
						<text class="title">{{$t('setup.Options')}}</text>
					</view>
					<view class="item line" v-for="(item,index) in list" :key="index" @click="select(index)"
						:class="theme + '-ftext-color'">
						<view class="icon">
							<image
								:src="cutt == index ? '../../../static/images/icons/yuanxuanzho.png' : '../../../static/images/icons/yuamweixuanzho.png'">
							</image>
						</view>
						<view class="text">
							<text>{{item.text}}</text>
						</view>

					</view>
				</view>
			</uni-popup>

			<view class="nav line" :class="theme + '-ftext-color'">
				<view class="nav-l">
					<view class="icon">
						<image style="transition:2s"
							src="../../../static/images/icons/yunyingguanli_qidongyeguanggaoguanli.png"></image>
					</view>
					<view class="text">
						<text>{{$t('setup.Startpage')}}</text>
					</view>
				</view>
			</view>
			<view class="nav line" :class="theme + '-ftext-color'" @click="handleChangeSkin">
				<view class="nav-l">
					<view class="icon">
						<image style="transition:2s" src="../../../static/images/icons/xiazai.png"></image>
					</view>
					<view class="text">
						<text>{{$t('setup.Checkupdate')}}</text>
					</view>
				</view>
				<view class="nav-r">
					<view class="swin">
						<switch color="#0081FF" :checked="isSwitch" />
					</view>
				</view>
			</view>
		</view>

		<view class="navBox">
			<view class="nav" :class="theme+'-ftitle-color'">
				<view class="nav-l">
					<view class="icon">
						<!-- <image style="transition:2s" src="../../static/images/icons/zhutiguanli.png"></image> -->
					</view>
					<view class="text" style="font-size: 26rpx;">
						<text>{{$t('setup.Othersettings')}}</text>
					</view>
				</view>
			</view>

			<view class="nav line" :class="theme + '-ftext-color'">
				<view class="nav-l">
					<view class="icon">
						<image style="transition:2s" src="../../../static/images/icons/qingli.png"></image>
					</view>
					<view class="text">
						<text>{{$t('setup.Clearcache')}}</text>
					</view>
				</view>
			</view>

			<!-- <view class="nav line" :class="theme + '-ftext-color'">
				<view class="nav-l">
					<view class="icon">
						<image style="transition:2s" src="../../../static/images/icons/guanyuwomen.png"></image>
					</view>
					<view class="text">
						<text>关于</text>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	// 设置页面
	export default {
		data() {
			return {
				isSwitch: false,
				data: [{
					title: '基本设置',
					english: 'Basicsettings',
					ber: true,
					list: [{
						text: '语言',
						english: 'Language',
					}, {
						text: '启动页',
						english: 'Startpage',
					}, {
						text: '检查更新',
						english: 'Checkupdate',
					}, ]
				}, {
					title: '其他设置',
					english: 'Othersettings',
					ber: true,
					list: [{
						text: '清理缓存',
						english: 'Clearcache',
					}]
				}],
				list: [{
					text: '中文(简体)',
					language: 'zh-CN'
				}, {
					text: 'English',
					language: 'en'
				}],
				cutt: uni.getStorageSync('locale').localeIndex
			};
		},
		onLoad() {
			this.$theme()
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			select(index) {
				this.cutt = index
				this.$i18n.locale = this.list[index].language;
				uni.setStorage({
					key: 'locale',
					data: {
						locale: this.list[index].language,
						localeIndex:index
					},
					success: (res) => {
						this.$theme()
						this.toggleAppLocale(this.list[index].language)
						this.close()
					}
				})
			},
			handleChangeSkin() {
				this.isSwitch = !this.isSwitch;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.setup {
		height: 100%;

		.line {
			cursor: pointer;
		}

		.navBox {

			.popupBox {
				width: 650rpx;
				display: flex;
				flex-direction: column;

				.item {
					width: 100%;
					height: 100rpx;
					display: flex;
					align-items: center;

					.icon {
						margin-left: 40rpx;
					}

					.title {
						font-size: 34rpx;
						font-weight: 600;
						margin-left: 40rpx;
					}

					text {
						margin-left: 40rpx;
						font-size: 24rpx;
						cursor: pointer;
					}
				}
			}

			.nav {
				height: 95rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 48rpx;
				margin-bottom: 10rpx;

				.nav-l {
					display: flex;
					align-items: center;
				}

				.icon {
					width: 40rpx;
					height: 40rpx;
					margin-right: 30rpx;
				}

				.text {
					text {
						font-size: 26rpx;
						cursor: pointer;
					}
				}

				.nav-r /deep/ {
					.swin {
						switch {
							.uni-switch-input {
								width: 72rpx;
								height: 34rpx;
								margin-right: 50rpx;
								border: 2rpx solid #dfdfdf;
								border-radius: 32rpx;
							}

							.uni-switch-input:before {
								height: 0;
							}

							.uni-switch-input:after {
								width: 30rpx;
								background-color: #fff;
								// box-shadow: 0 1px 3px #ccc;
								height: 30rpx;
								border-radius: 15rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
